<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="dataList" height="450" style="width: 100%;margin: 5px;">
            <el-table-column prop="" label="序号" fixed align="center" width="90" >
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column prop="buyNumber" label="采购单编号" align="center" width="150" ></el-table-column>
            <el-table-column prop="partName" label="零件名称" align="center" width="200" ></el-table-column>
            <el-table-column prop="buyCount" label="采购数量" align="center" width="" ></el-table-column>
            <el-table-column prop="" label="采购时间" align="center" width="120" >
                <template slot-scope="scope">
                    {{getTime(scope.row.buyTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="" label="到货日期" align="center" width="120" >
                <template slot-scope="scope">
                    {{getTime(scope.row.reachTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="requestBuyer" label="申请采购人" align="center" width="110" ></el-table-column>
            <el-table-column prop="" label="申请采购时间" align="center" width="120" >
                <template slot-scope="scope">
                    {{getTime(scope.row.requestTime)}}
                </template>
            </el-table-column>
            <el-table-column prop="reachCount" label="到货数量" align="center" width="" ></el-table-column>
            <el-table-column prop="totalPrice" label="采购金额" align="center" width="" ></el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            total: 0,
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            getList(){
                let _this = this;

                selectAjax("get","/printManagement/queryPurchase",{
                    "currentPage": _this.currentPage,
                    "pageSize": _this.pageSize,
                },function (data) {
                    _this.total = data.data.total;
                    _this.dataList = data.data.purchaseList;
                })
            },
            getTime(val){
                if (val) {
                    const date = new Date(val);
                    const year = date.getFullYear();
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const day = date.getDate().toString().padStart(2, '0');
                    return `${year}-${month}-${day}`;
                }
                //return new Date(val).f("yyyy-MM-dd");
            },
            handleSizeChange(val){
                let _this = this;
                _this.pageSize = val;
                _this.getList();
            },
            handleCurrentChange(val){
                let _this = this;
                _this.currentPage = val;
                _this.getList();
            }
        },
        mounted() {
            this.getList();
        }
    })
</script>
</html>